<template>
    <div class="tableSearch">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" size="small">
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title" maxlength="20" placeholder="请输入标题" clearable></el-input>
        </el-form-item> <br>
        <el-form-item label="背景图样例" prop="backgroundMap">
          <div style="margin-top:-2px;font-size:13px;color:#bbb;"><span>选择样例，可自定义H5的背景色</span></div>
          <div class="imgbox" v-for="(item,index) in ruleForm.backgroundMap" :key="index" @click="firstIm(index)">
            <img class="boxImg" style="width:100%;height:100%;" :src="item" alt="">
          </div>
        </el-form-item>
        <div v-if="mask" id="mask">
        </div>
        <el-form-item style="margin-left:350px">
          <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
          <el-button type="primary" @click="resetForm('ruleForm')">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>
<script>
import { saveOrUpdateH5 } from "@/api";
import { mapState } from "vuex";
import templateOne from "@/assets/images/templateOne.png";
import templateTwo from "@/assets/images/templateTwo.png";
import templateThree from "@/assets/images/templateThree.png";
export default {
  data() {
    return {
      templateOne,
      templateTwo,
      templateThree,
      mask: false,
      ruleForm: {
        title: "",
        backgroundMap: []
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        backgroundMap: [{ required: true, message: "请选择背景图", trigger: "blur" }]
      },
      backgroundImg: "" //选中每个图片
    };
  },
  mounted() {
    this.background();
  },
  computed: mapState(["power", "merchantId"]),
  methods: {
    // 背景色样例
    background() {
      var arr = [];
      arr.push(this.templateOne);
      arr.push(this.templateTwo);
      arr.push(this.templateThree);
      this.ruleForm.backgroundMap = arr;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let data = {
            url: "",
            checkedRecourceId: this.backgroundImg,
            title: this.ruleForm.title,
            companyId: this.merchantId
          };
          if (this.backgroundImg === "") {
            this.$message.error('请选择背景图')
          } else {
            saveOrUpdateH5(data).then(res => {
              if(res.code == 200) {
                this.$message.success(res.msg)
                this.$router.go(-1);
              } else {
                this.$message.error(res.msg)
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.go(-1);
    },
    firstIm(el) {
      var imgs = document.getElementsByClassName("imgbox");
      var img = imgs[el].getElementsByClassName("boxImg");

      for (var i = 0; i < imgs.length; i++) {
        if (i == el) {
          imgs[i].style.boxShadow = "0px 0px 5px #0d9cf0";
          imgs[i].style.transform = "scale(1.15)";
          imgs[i].style.transition = "all 0.6s";
        } else {
          imgs[i].style.boxShadow = null;
          imgs[i].style.transform = "scale(1)";
          imgs[i].style.transition = "all 0.6s";
        }
      }
      this.backgroundImg = el;
    }
  }
};
</script>
<style scoped>
.imgbox {
  width: 250px;
  height: 150px; 
  display: inline-block;
  margin: 20px 10px;
}
#mask {
  width: 150px;
  height: 150px;
  background: rgba(55, 55, 55, 0.096);
}
</style>
